<template>
	<!--#ifdef MP || MP-WEIXIN-->
		<u-navbar v-if="(searchShow || plusShow || settingShow || submitShow)"
		:back-text="title" 
		:is-back="isBack"
		:title-bold="true"
		title="" 
		:border-bottom="false" 
		:background="background"
		:title-color="fontColor"
		:back-text-style="backTextStyle"
		:back-icon-color="backIconColor">
			<view  class="slot-wrap disfr-lr p15 f32" style="width: 100%;">
				<view class="slot-wrap-left"></view>
				<view class="slot-wrap-right disf pr20">
					<view v-if="searchShow" @tap="search"><u-icon name="search" :color="rightIncoColor" size="44"></u-icon></view>
					<view v-if="plusShow" @tap="plus" class="ml30"><u-icon name="plus" :color="rightIncoColor" size="44"></u-icon></view>
					<view v-if="settingShow" @tap="setting" class="ml30"><u-icon name="xuanzemoban-xuanzekuang" custom-prefix="custom-icon" :color="rightIncoColor" size="44"></u-icon></view>
					<view v-if="submitShow" class="ml30">
						<slot></slot>
						<!--<button form-type="submit" style="height: 70rpx;">
							<view style="position: relative;top:-20rpx;">
								<u-icon name="duihao" custom-prefix="custom-icon" :color="rightIncoColor" size="44"></u-icon>
							</view>
						</button>-->
					</view>
				</view>
			</view>
		</u-navbar>
		<u-navbar v-else
		back-text="" 
		:is-back="isBack"
		:title-bold="true"
		:title="title" 
		:border-bottom="navbarBorder" 
		:background="background"
		:title-color="fontColor"
		:back-text-style="backTextStyle"
		:back-icon-color="backIconColor">
		</u-navbar>
	<!--#else-->
		<u-navbar 
		 back-text="" 
		:is-back="isBack" 
		:title-bold="true"
		:title="title" 
		:border-bottom="navbarBorder" 
		:background="background"
		:title-color="fontColor"
		:back-text-style="backTextStyle"
		:back-icon-color="backIconColor"> 
			<view class="slot-wrap disfr-lr p15 f32" style="width: 100%;">
				<view class="slot-wrap-left"></view>
				<view class="slot-wrap-right disf pr20">
					<view v-if="searchShow" @tap="search"><u-icon name="search" :color="rightIncoColor" size="44"></u-icon></view>
					<view v-if="plusShow" @tap="plus" class="ml30"><u-icon name="plus" :color="rightIncoColor" size="44"></u-icon></view>
					<view v-if="settingShow" @tap="setting" class="ml30"><u-icon name="xuanzemoban-xuanzekuang" custom-prefix="custom-icon" :color="rightIncoColor" size="44"></u-icon></view>
				    <view v-if="submitShow" class="ml30">
						<slot></slot>
						<!--<button form-type="submit" style="height: 70rpx;">
							<view style="position: relative;top:-20rpx;">
								<u-icon name="duihao" custom-prefix="custom-icon" :color="rightIncoColor" size="44"></u-icon>
							</view>
						</button>-->
					</view>
				</view>
			</view>
		</u-navbar>
	<!--#endif-->
</template>

<script setup>
import { ref,watch } from 'vue';
const props = defineProps({
  title:String,//标题	
  bgColor:String, //背景色
  navbarBorder:Boolean,//是否显示底边框
  fontColor:String, //字体颜色
  isBack:Boolean  ,// 是否显示返回按钮 
  plus:Boolean, //显示右边工具栏 ”添加“
  search:Boolean, //显示右边工具栏 ”搜索“
  setting:Boolean, //显示右边工具栏 ”...“
  submit:Boolean
});
const background=ref({
	backgroundColor: props.bgColor,
});	
const backTextStyle=ref({
	color: props.fontColor
});
const backIconColor=ref(props.fontColor);
const rightIncoColor=ref(props.fontColor);
const plusShow=ref(props.plus);
const searchShow=ref(props.search);
const settingShow=ref(props.setting);
const submitShow=ref(props.submit);
const emit = defineEmits(['plus-event','search-event','setting-event']);
const search=(event)=>{
	event.event='search-event';
	emit('search-event', event);
}
const plus=(event)=>{
	event.event='plus-event';
	emit('plus-event', event);
}
const setting=(event)=>{
	event.event='setting-event';
	emit('setting-event', event);
}
</script>

<style lang="scss">
    button {
        display: inline-block; /* 或者其他合适的值 */
        padding: 0; /* 移除内边距 */
        border: none; /* 移除边框 */
        background: none; /* 移除背景色 */
        /* 根据需要添加更多样式 */
    }
     
    button::before, button::after {
        content: none; /* 移除伪元素内容 */
    }
</style>
